<template>
  <div class="yy-table-header">
    <div class="defaul-title">
      {{ props.title || '明细列表' }}
    </div>
    <div class="btns">
      <slot name="btns"></slot>
      <div class="icon-btns" v-if="!props.hideSetting">
        <el-tooltip class="box-item" effect="dark" content="设置" placement="top-start">
          <el-icon><Setting /></el-icon>
        </el-tooltip>
        <el-tooltip class="box-item" effect="dark" :content="isBig ? '缩小' : '放大'" placement="top-start">
          <el-icon @click="scaleTableMoudel"><FullScreen /></el-icon>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script setup name="yyTableHeader" lang="ts">
import bus from '@/layout/components/bus'
const props = defineProps(["title",'hideSetting'])
let isBig = ref(false)
const scaleTableMoudel = (val) => {
  let newIsBig = isBig.value
  let cardbox = document.getElementsByClassName("yy-table-card-box")
  if (!cardbox || !cardbox.length) {
    return
  }
  bus.emit("tableSizeChange",{val: !newIsBig})
  if (!newIsBig) {
    cardbox[0].classList.add("yy-table-card-box-fiexd")
  } else {
    // 延时执行 优化页面抖动
    setTimeout(() => {
      cardbox[0].classList.remove("yy-table-card-box-fiexd")
    },500)
  }
  isBig.value = !newIsBig
}

const keyEvent = (event:any) => {
  if (event.which && event.which == 27 && isBig.value) {
      scaleTableMoudel()
  }
}
onMounted(() => {
  window.addEventListener("keydown", keyEvent)
})
onUnmounted(() => {
  window.removeEventListener("keydown",keyEvent)
})
</script>

<style lang="scss" scoped>
.yy-table-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btns{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .icon-btns{
    width: 90px;
    background-color: rgba(42, 81, 161, 0.2);
    height: 30px;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3A85FF;
    font-size: 20px;
    border-radius: 3px;
    cursor: pointer;
    .el-icon{
      margin: 0px 6px;
    }
  }
}
.defaul-title{
  position: relative;
}
.defaul-title::after{
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: -15px;
  width: 4px;
  height: 24px;
  background-color: #2A51A1;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
</style>
